<template>
  <div class="nav">
    <el-menu default-active="1" router>
      <template v-for="item in itemList">
        <template v-if="item.list">
          <el-submenu :index="item.index">
            <template slot="title">
              <i v-bind:class="item.icon"> {{item.name}}</i>
            </template>
            <el-menu-item v-for="(detailItem,i) in item.list" :key="i" :index="detailItem.index">
              <i v-bind:class="detailItem.icon">{{detailItem.name}}</i>
            </el-menu-item>

          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index">
            <i v-bind:class="item.icon"> {{item.name}}</i>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>
<script>

  export default {
    data: function () {
      return {
        itemList: [
          {
            index: 'readme',
            icon: 'el-icon-message',
            name: '自述'
          },
          {
            index: '2',
            icon: 'el-icon-message',
            name: '数据',
            list: [
              {
                index: 'basetable',
                name: '基础表格',
                icon: 'el-icon-message'
              },
              {
                index: 'baseform',
                name: '基本表单',
                icon: 'el-icon-message'
              },
              {
                index: 'basecharts',
                name: '基本图表',
                icon: 'el-icon-message'
              }
            ]
          },
          {
            index: '3',
            icon: 'el-icon-message',
            name: '数据管理',
            list: [
              {
                index: 'user-list',
                name: '用户列表',
                icon: 'el-icon-message'
              },
              {
                index: 'baseform',
                name: '基本表单',
                icon: 'el-icon-message'
              },
              {
                index: 'basecharts',
                name: '基本图表',
                icon: 'el-icon-message'
              },
              {
                index: 'markdown',
                name: 'md',
                icon: 'el-icon-message'
              }
            ]
          },
          {
            index: 'drag',
            name: '拖拽',
            icon: 'el-icon-message'
          },
          {
            index: 'vuex',
            name: 'vuex',
            icon: 'el-icon-message'
          }
        ]
      }

    }
  }
</script>
<style>


</style>

